<template>
  <div>
    <div class="head">
      <el-row :gutter="15">
        <el-col :span="6">
          <el-input placeholder="请输入内容" v-model="keyword" class="input-with-select">
            <el-button slot="append" @click="conditionSearch" icon="el-icon-search"></el-button>
          </el-input>
        </el-col>
        <el-col :span="2">
          <el-button type="warning" icon="el-icon-refresh" @click="handleRef">重置</el-button>
        </el-col>
      </el-row>
      <div style="margin-bottom: 10px">
        <el-button icon="el-icon-plus" @click="handleAdd(0)" type="primary">添加</el-button>
      </div>
    </div>
    <div class="table">
      <el-table :data="tableData" style="width: 100%; margin-bottom: 20px" row-key="id" border default-expand-all :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
        <el-table-column prop="name" label="菜单"> </el-table-column>
        <el-table-column prop="path" label="路径"> </el-table-column>
        <el-table-column prop="icon" label="图标" width="120">
          <template slot-scope="scoped">
            <span style="font-size: 18px" :class="`iconfont ${scoped.row.icon}`"></span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="300" class-name="operate">
          <template slot-scope="scoped">
            <el-button type="primary" icon="el-icon-plus" v-if="!scoped.row.pid && !scoped.row.path" @click="handleAdd(scoped.row.id)">新增子菜单</el-button>
            <el-button icon="el-icon-edit" @click="handleEdit(scoped.row)">编辑</el-button>
            <el-button icon="el-icon-delete" type="danger" @click="handleDel(scoped.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 添加或修改弹框 -->
    <el-dialog top="20px" :title="dialogTitle + '菜单'" :visible.sync="dialogVisible" width="30%" @close="handleClose">
      <add-and-edit ref="bulletBox" @submit="submit" :ruleForm="editObj"></add-and-edit>
    </el-dialog>
  </div>
</template>

<script>
import { getMenuList, delMenu, addOrEditAdmin, iconList } from '@/api/menuApi.js'
import addAndEdit from './AddAndEdit.vue'
export default {
  data() {
    return {
      loading: true,
      dialogVisible: false, //添加和修改弹窗控制开关
      editObj: {}, //修改行对象信息
      dialogTitle: '添加',
      tableData: [],
      keyword: '',
    }
  },
  components: {
    addAndEdit,
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      this.loading = true
      getMenuList({ keyword: this.keyword }).then((res) => {
        if (res.data.code != 200) return this.$message.error('数据请求失败')
        this.loading = false
        this.tableData = res.data.data
      })
    },
    //关键字、性别、时间筛选
    conditionSearch() {
      this.getData()
    },
    //重置条件筛选
    handleRef() {
      this.keyword = ''
      this.getData()
    },
    //添加
    handleAdd(id) {
      this.dialogTitle = '添加'
      this.dialogVisible = true
      this.editObj = {
        name: '',
        path: '',
        icon: '',
        pid: id,
      }
      if (id == 0) {
        delete this.editObj.pid
      }
    },
    //修改
    handleEdit(val) {
      this.dialogTitle = '修改'
      this.dialogVisible = true
      this.editObj = JSON.parse(JSON.stringify(val))
    },
    //删除
    handleDel(row) {
      this.$confirm(`确定删除${row.name}菜单吗`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          delMenu({ id: row.id }).then((res) => {
            if (res.data.code != 200) return this.$message.error(`删除${row.name}失败！！！`)
            this.$message.success('删除成功!')
            this.getData()
            this.$emit('upMenu')
          })
        })
        .catch(() => {
          this.$message.info('已取消删除')
        })
    },
    //提交表单，添加或编辑
    submit(formData) {
      this.dialogVisible = false
      addOrEditAdmin(formData).then((res) => {
        if (res.data.code != 200) return this.$message.error(`${this.dialogTitle}失败！！！`)
        this.$message.success(`${this.dialogTitle}成功`)
        this.getData()
        if (formData.id) {
          this.$emit('upMenu')
        }
      })
    },
    //关闭弹框
    handleClose() {
      this.$refs.bulletBox.resetForm()
    },
  },
}
</script>

<style lang="less" scoped>
.block {
  margin-top: 15px;
}
/deep/.operate {
  text-align: right !important;
}
</style>